<template>
  <div>
    <div>
      <el-button @click="activeTab = 'follows';loadUser()" :class="{ active: activeTab == 'follows' }"  ><el-icon color="#FFCC01FF"><Star /></el-icon>关注用户</el-button>
      <el-button @click="activeTab = 'favorites';loadScene()" :class="{ active: activeTab == 'favorites' }" ><el-icon color="#FFCC01FF" ><CollectionTag /></el-icon>景点收藏</el-button>
    </div>
    <div v-if="activeTab == 'follows'">
      <my-follows>
        <div style="height: 50px;overflow: hidden;">
          <el-input
              style="width: 70%;position: relative;left: 15%;top: 10px;"
              placeholder="请输入名称或名称关键字"
              maxlength="10"
              show-word-limit
              @keydown.enter="resetUserSearch"
              v-model="selectUserByInput.search"
          >
            <template #append>
              <el-button @click="resetUserSearch"><el-icon color="#529b2e"><Search/></el-icon></el-button>
            </template>
          </el-input>
        </div>
        <p class="userP" v-for="(item, index) in likeUserArr" :key="index" style="transition: box-shadow 0.3s;overflow:hidden;height: 50px;padding:4px;margin: 2px; background-color:#fff;border-radius:15px">
          <div @click="goToGuideView(item.id)" style="display: inline-block;width: 80%;">
            <div>
              <el-avatar style="position: relative;left: 5px" :src="avatar(item.imgUrl)" :size="49"/>
              <div style="display: inline-block; height: 50px; width: 70%; white-space: nowrap; overflow: hidden; position: relative;">
                <h v-if="item.isGuide == 1" style="position: absolute; color: #ff639c; font-size: 25px; left: 5%; width: 200px; height: 30px;">{{ item.nickname }}</h>
                <h v-if="item.isGuide == 0" style="position: absolute; color: #777; font-size: 25px; left: 5%; width: 200px; height: 30px;">{{ item.nickname }}</h>
                <h style="width: 80%; position: absolute; color: #909399; font-weight: lighter; right: 15%; bottom: 1%">{{ item.introduction }}</h>
                <el-rate v-if="item.isGuide === 1" style="position: absolute;right: 0%;" v-model="item.rating" disabled show-score text-color="#ff9900" score-template="{value} points"/>
              </div>

            </div>
          </div>
          <div v-if="item.status == true " style="display: inline-block;width: 20%;">
            <el-button @click="butUser(item)" style="width: 88px;position: relative;float: right;bottom: 7px;right: 10px;" color="#c8c9cc" class="unFollow">取消关注</el-button>
          </div>
          <div v-if="item.status == false" style="display: inline-block;width: 20%;">
            <el-button @click="butUser(item)" style="width: 88px;position:relative;float: right;bottom: 7px;right: 10px;" color="#a0cfff" class="follow" >关注</el-button>
          </div>
        </p>
      </my-follows>
    </div>
    <div v-if="activeTab == 'favorites'">
      <my-favorites>
        <div style="height: 50px;overflow: hidden;">
          <el-input
              style="width: 70%;position: relative;left: 15%;top: 10px;"
              placeholder="请输入名称或名称关键字"
              maxlength="10"
              show-word-limit
              @keydown.enter="resetSceneSearch"
              v-model="selectSceneByInput.search"
          >
            <template #append>
              <el-button @click="resetSceneSearch"><el-icon color="#529b2e"><Search/></el-icon></el-button>
            </template>
          </el-input>
        </div>
        <div v-for="(item, index) in likeSceneArr" :key="index" style="display: inline-block; margin: 2px; width: 300px;height: 300px">
          <el-card shadow="hover">
            <template #header>
              <h style="font-weight: bolder;">{{ item.name }}</h>
              <div v-if="item.status==true" style="display: inline-block;float: right;position: relative;bottom: 5px;">
                <el-button @click="butScene(item)" style="width: 88px;position: relative;" color="#c8c9cc" class="unFollow">取消收藏</el-button>
              </div>
              <div v-if="item.status==false" style="display: inline-block;float: right;position: relative;bottom: 5px;">
                <el-button @click="butScene(item)" style="width: 88px;position: relative;" color="#a0cfff" class="follow">收藏</el-button>
              </div>
            </template>
            <router-link :to="{ path:'/xqy', query:{ id: item.id }}" style="text-decoration: none;">
              <img :src="item.imgUrl" alt="" style="width: 100%;height: 200px;">
              <div style="overflow: hidden;height: 40px;color: #666666 ">{{ item.slogan }}</div>
              <el-rate style="position: relative;right: 0px" v-model="item.rating" disabled show-score text-color="#ff9900" score-template="{value} points"/>
            </router-link>
          </el-card>
        </div>
      </my-favorites>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import { Search} from "@element-plus/icons-vue";
  import qs from "qs";
  import {ElMessage} from "element-plus";
import axios from "axios";
import router from "@/router";

  //获取用户信息
  const user = ref(getUser());
  const uid = user.value.id;
  //定义响应变量控制关注/收藏切换
  const activeTab = ref('follows');
  //定义数组装查询出的用户数据
  const likeUserArr = ref({});
  //定义数组装查询景区数据
  const likeSceneArr = ref([]);
  //定义加载关注用户数据的方法
  const loadUser = ()=>{
    axios.get(BASE_URL+'/yyt/like/user/select/'+uid).then((response)=>{
      if (response.data.code==2000){
        likeUserArr.value = response.data.data;
      }else {
        ElMessage.error("加载用户失败");
      }
    })
  }
  //定义加载收藏景区数据的方法
  const loadScene = ()=>{
    axios.get(BASE_URL+'/yyt/like/scene/select/'+uid).then((response)=>{
      if (response.data.code==2000){
        likeSceneArr.value = response.data.data;
      }else {
        ElMessage.error("加载景区失败");
      }
    })
  }
  //进页面时自动加载
  onMounted(()=>{
    loadUser();
    loadScene();
  })
  //定义变量存储搜索用户索引
  const selectUserByInput = ref({search:'',id:uid});
  //定义变量存储搜索用户索引
  const selectSceneByInput = ref({search:'',id:uid});

  //重置搜索用户信息,并按词条搜索
  const resetUserSearch = ()=>{
    let data = qs.stringify(selectUserByInput.value);
    axios.post(BASE_URL+'/yyt/like/user/search',data).then((response)=>{
      if (response.data.code==2000){
        likeUserArr.value={};
        likeUserArr.value = response.data.data;
      }else {
        ElMessage.error("错误");
      }
    })
  }
  //重置搜索景区信息,并按词条搜索
  const resetSceneSearch = ()=>{
    let data = qs.stringify(selectSceneByInput.value);
    axios.post(BASE_URL+'/yyt/like/scene/search',data).then((response)=>{
      if (response.data.code==2000){
        likeSceneArr.value={};
        likeSceneArr.value = response.data.data;
      }else {
        ElMessage.error("错误");
      }
    })
  }
  //定义对象保存取消关注数据
  const userIdData = ref({id:'',fid:''})
  //定义决定是否关注/取消关注的方法
  const butUser = (item) =>{
    if (item.status==true){
      deleteFollowUser(item.id);
      item.status = !item.status;
    }else if (item.status==false){
      updateFollowUser(item.id);
      item.status = !item.status;
    }
  }
  //取消关注连接后端方法
  const deleteFollowUser = (id)=>{
    userIdData.value.id=id;
    userIdData.value.fid=uid;
    let data = qs.stringify(userIdData.value);
    axios.post(BASE_URL+'/yyt/like/user/delete/',data).then((response)=>{
      if (response.data.code==2000){
        ElMessage.success("取消关注成功");
      }else {
        ElMessage.error("操作失败");
      }
    })
  }
  // 关注连接后端方法
  const updateFollowUser = (id)=>{
    userIdData.value.id=id;
    userIdData.value.fid=uid;
    let data = qs.stringify(userIdData.value);
    axios.post(BASE_URL+'/yyt/like/user/update/',data).then((response)=>{
      if (response.data.code==2000){
        ElMessage.success("关注成功");
      }else {
        ElMessage.error("操作失败");
      }
    })
  }
  //定义对象保存取消收藏数据
  const sceneIdData = ref({id:'',fid:''})
  //定义决定是否关注/取消关注的方法
  const butScene = (item) =>{
    if (item.status==true){
      deleteFollowScene(item.id);
      item.status = !item.status;
    }else if (item.status==false){
      updateFollowScene(item.id);
      item.status = !item.status;
    }
  }
  //取消收藏连接后端方法
  const deleteFollowScene = (id)=>{
    sceneIdData.value.id=id;
    sceneIdData.value.fid=uid;
    let data = qs.stringify(sceneIdData.value);
    axios.post(BASE_URL+'/yyt/like/scene/delete/',data).then((response)=>{
      if (response.data.code==2000){
        ElMessage.success("取消收藏成功");
      }else {
        ElMessage.error("操作失败");
      }
    })
  }
  // 收藏连接后端方法
  const updateFollowScene = (id)=>{
    sceneIdData.value.id=id;
    sceneIdData.value.fid=uid;
    let data = qs.stringify(sceneIdData.value);
    axios.post(BASE_URL+'/yyt/like/scene/update/',data).then((response)=>{
      if (response.data.code==2000){
        ElMessage.success("收藏成功");
      }else {
        ElMessage.error("操作失败");
      }
    })
  }
  //头像路径
  const avatar = (imgUrl)=>{
    let url = BASE_URL+imgUrl;
    return url;
  }
  const goToGuideView = (id)=> {
    router.push({ path: '/Guide', query: { id: id } });
  }
</script>




<style scoped>
.active {
  background-color: #93D5CCFF;
  color: #fff;
  border-color: #93D5CCFF;
}
.userP:hover{
  box-shadow: 0px 0px 7px 1px #a0cfff;
}
.unFollow{
  color: #606266;
}
.follow{
  color: #fff;
}


</style>